<!--  -->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="isShow"
    :width="handleScreenWidthToVw(574) + 'px'"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="dialog-container">
      <div class="dialog-children dialog-upload-contaienr">
        <upload-img is-show-tip tip-text="上传头像" @success="handleSuccess">
          <div class="upload-info">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" :limit="1" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </div>
          <template v-slot:tip>
            <div class="el-upload__tip">人员头像</div>
          </template>
        </upload-img>
      </div>
      <div class="dialog-children flex-sub dialog-form-contaienr">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="人员姓名:" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <template v-if="this.ruleForm.identityEnum==='INTERNAL_MEMBER'">
            <el-form-item label="所属企业:" prop="orgName">
              <el-select
                ref="orgSelect"
                v-model="ruleForm.orgName"
                placeholder="请选择"
                class="form-input-width"
              >
                <el-tree
                  ref="tree"
                  :data="orgData"
                  :props="defaultProps"
                  :highlight-current="true"
                  @node-click="handleNodeClick"
                />
                <el-option :value="ruleForm.orgid" class="selete-org-bg"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="职位:" prop="position">
              <el-input v-model="ruleForm.position" />
            </el-form-item>

            <el-form-item label="主管身份:">
              <el-radio v-model="ruleForm.superiorEnum" label="GROUPLEADER">是</el-radio>
              <el-radio v-model="ruleForm.superiorEnum" label="SUPERVISOR">否</el-radio>
            </el-form-item>
            <el-form-item label="关联帐号:" prop="remark">
              <el-select v-model="ruleForm.userId" filterable placeholder="请选择">
                <el-option
                  v-for="user in userData"
                  :key="user.id"
                  :label="user.account"
                  :value="user.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>

          <el-form-item label="关联车辆:" prop="carId">
            <el-select v-model="ruleForm.carId" filterable placeholder="请选择">
              <el-option
                v-for="car in carData"
                :key="car.id"
                :label="car.carNo"
                :value="car.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="ruleForm.remark"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="isLoading" type="primary" size="small" @click="handleSubmit">
        提交
      </el-button>
      <el-button size="small" @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import UploadImg from '@/components/upload-img/index'
import { MAX_INTEGER } from '@/consts.js'
import { findOrgList, findRecordsCar, findUserPageByParam } from '../api.js'
import { tree } from '@/utils/tree'
import { handleScreenWidthToVw, handleImage } from '@/utils/tools'

export default {
  components: { UploadImg },
  props: {
    isShow: { type: Boolean, default: false },
    initData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      orgData: [],
      userData: [],
      carData: [],
      imageUrl: '',
      ruleForm: {
        orgName: '',
        orgId: '',
        identityEnum: 'INTERNAL_MEMBER',
        superiorEnum: 'SUPERVISOR',
        position: '',
        userId: '',
        carId: '',
        userName: '',
        remark: '',
      },
      // fileList: [],
      title: '新增',
      isLoading: false,
    }
  },

  computed: {
    rules() {
      return {
        name: [{ required: true, message: '请输入人员名称', trigger: 'change' }],
        orgName: [{ required: true, message: '请输入组织名称', trigger: 'change' }],
        userName: [{ required: true, message: '请输入关联人员', trigger: 'change' }],
      }
    },
    dialogTitle() {
      return `${this.title}人员`
    },
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
    pageInfo() {
      return {
        keyword: '',
        pageNo: 1,
        pageSize: MAX_INTEGER,
        identityEnum: 'INTERNAL_MEMBER',
      }
    },
    defaultProps() {
      return {
        children: 'children',
        label: 'name',
      }
    },
  },

  watch: {
    initData: {
      deep: true,
      handler: function (value) {
        if (typeof value === 'object') {
          this.ruleForm = { ...value }
          console.log(this.ruleForm)
          this.title = value.title || '修改'
          this.imageUrl = ''
          // this.fileList = []
          this.ruleForm.fileId && (this.imageUrl = handleImage(this.ruleForm.fileId))

          this.$nextTick(() => {
            this.$refs.ruleForm && this.$refs.ruleForm.clearValidate()
          })
        }
      },
    },
  },
  created() {
    this.getAllOrg()
    this.getAllUser()
    this.getAllCar()
  },
  methods: {
    async getAllUser() {
      const { records } = await findUserPageByParam(this.pageInfo)
      this.userData = records
    },
    async getAllOrg() {
      const res = await findOrgList()
      this.orgData = tree(res)
    },
    async getAllCar() {
      const { records } = await findRecordsCar(this.pageInfo)
      this.carData = records
    },
    // 点击组织树的节点
    handleNodeClick(obj) {
      this.ruleForm.orgName = obj.name
      this.ruleForm.orgId = obj.id
    },
    handleClose() {
      this.ruleForm = {
        name: '',
        orgName: '',
        orgId: '',
        radio: true,
        position: '',
        userId: '',
        carId: '',
        userName: '',
        remark: '',
      }
      this.$emit('close')
    },
    handleSuccess(fileList) {
      this.imageUrl = fileList[fileList.length - 1].url
      // this.fileList = [fileList[fileList.length] - 1]
      this.ruleForm.fileId = fileList[fileList.length - 1].fileId
    },
    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.isLoading = true
          this.ruleForm.recordCarIds = this.ruleForm.carId ? [this.ruleForm.carId] : []
          this.$emit('submit', this.ruleForm)
        }
      })
    },
    handleCloseLoading() {
      this.isLoading = false
    },
  },
}
</script>
<style lang="scss" scoped>
.dialog-container {
  display: flex;
  // padding: 0 vw(20px);
  flex-direction: row;
}

.dialog-children {
  flex-shrink: 0;
}

.selete-org-bg {
  height: vh(200px);
  padding: 0 !important;
  overflow: auto;
  background-color: #fff;
}

.upload-info {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.avatar-uploader-icon {
  width: vw(160px);
  height: vw(160px);
  font-size: vw(28px);
  line-height: vw(160px);
  color: #8c939d;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

.avatar {
  display: block;
  width: vw(160px);
  height: vw(160px);
  border-radius: 50%;
}

.el-upload__tip {
  width: 100%;
  margin-top: vh(20px);
  font-size: vw(14px);
  color: #333;
  text-align: center;
}

.dialog-upload-contaienr {
  margin-top: vh(14px);
  margin-left: vw(16px);
}

.dialog-form-contaienr {
  margin-left: vw(40px);
}

::v-deep {
  .el-form-item {
    margin-bottom: vh(20px);
  }
  .el-input__inner {
    font-size: vw(14px);
    width: vw(200px);
  }
  .el-select {
    width: vw(200px);
  }
}
</style>
